<template>
  <div class="layer_panel_wrap"
       :class="{ 'layer_panel_collapse': collapse }"
  >
    <div class="layer_panel_header" >
      <div v-if="!collapse" >控制面板</div>
      <img src="~@/static/images/11.svg" class="collapse_icon"
           :class="{ 'collapse': collapse }"
           @click="changeCollapse"
      />
    </div>
    <div class="layer_panel_content" v-if="!collapse" >

    </div>
    <div class="layer_text" v-else >
      控制面板
    </div>
  </div>
</template>
<style scoped lang="less" >
@import "index";
</style>
<script>
export default {
  name: 'LayerPanel',
  data() {
    return {
      collapse: false
    }
  },
  methods: {
    changeCollapse() {
      this.collapse = !this.collapse
      this.$emit('collapse')
    }
  },
  mounted() {

  }
}
</script>
